HTML Doc made using TxtToHTML written by "ssnake"

At last! With the imminent release of Voyager 3 and IBrowse 2, we are finally
able to use JavaScript with all main Amiga web browsers. Now is a good time to
look at what we can, and cannot, do with JavaScript in a web environment. This
tutorial look at JavaScript in terms of what we can do and how to do it. We will
cover the basics of the language in order to be able to use it, but the overall
approach is far more practical than theoretical. We will assume that you are
familiar with the basics of script programming, the "Useful ARexx" tutorials
provide this.

JavaScript is contained within the HTML of a page and executed by the browser.
This is the opposite of CGI scripts that reside on and are executed by the
server. This has the advantage that you can use it even if your ISP doesn't
provide a CGI facility for your webspace, as is the case with most free web
space. The disadvantage is that it relies on every browser executing your script
in the same way, something that doesn't always happen as the "big two" browser
companies each try to force their own interpretation on the standard. This is
made worse by the fact that there are several different versions of JavaScript,
with different features, not all supported by all browsers. We'll look at
compatibility issues later on, but for most situations the browsers behave
similarly.

We'll start with a simple example and then look at what it does and how it
works. JavaScript can appear anywhere within the HTML of a page and is executed
at the point it is found. In this case we are going to add some text to the
bottom of a page, showing the date and time it was loaded, and when the page was
last updated on the server, so this script appears just before the </BODY> tag
of the page.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>

The first line tells the browser that the following text is JavaScript and that
it should be executed, not displayed. If you use functions only available in a
later version of JavaScript, you must specify this in the language attribute. A
script containing 'LANGUAGE="JavaScript1.2"' will only be executed by a
browser that supports at least version 1.2 of JavaScript.

The HTML standard says that a browser should ignore any tags it doesn't
recognise display the contents as standard text. This would result in a
non-JavaScript browser displaying the code of the script. To avoid this we
include the whole of the script within the HTML  comment tags.

The next line is a comment, JavaScript ignores everything from // to the end of
the line. The command document.write does just what it says, it writes the
contents of the brackets into the document, for the browser to render as HTML,
in this case it's a tag to display the following text centred. This line, like
all JavaScript statements, ends with a semi-colon. While you can usually get
away with omitting the semi-colons if you stick to one statement per line, it's
safest to get into the habit of always ending a line this way.

Using document.writeln does the same, except it adds a line feed to the end of
the text. On line four we are displaying more than a text string, Date() is a
JavaScript function to return the current date and time. The + operator joins
the two strings, the text and the output from Date() into one string for
document.writeln. We could just as easily have written this as two lines

document.write('<BR>This page was loaded at ');
document.writeln(Date());

Note that we include a <BR> in the string we send to the browser. The line feeds
added by document.writeln are ignored when laying out the text, in the same way
that line feeds in the HTML are ignored.

Line five uses a property of the document, more on this in a moment, that
contains the date the page was last changed. This information is normally sent
to the browser along with the page. Instead of including a line of HTML showing
the date of the last update in each page, and needing to update your code each
time, this JavaScript will automatically show the date the page was last
uploaded.

Finally, we close the <DIV> tag and then the script. The HTML closing comment
before the </SCRIPT> is important, without this, non-JavaScript browsers will
think the rest of the page is also a comment.

** Properties and methods

JavaScript is an object oriented language. We have already met one of the
objects, "document", we will meet many others soon enough. The document object
refers to the current HTML document, which may be a complete page or a frame
within a page (or even a sub-frame within a frame). write and writeln are
methods of the document object, that is document.write('text') writes text to
the current document. In fact, document is a property of the window object, it
should be written as window.document, meaning the document contained in the
current window. This is used so much that you can use document on its own when
referring to the contents of the current window. By current window, JavaScript
is referring to a window or frame, so it is normally simpler to use document on
its own rather than start calling frames windows.

While methods do things to objects, like writing text in them, properties
contains information about their objects. Some properties are read-only, such as
document.lastModified (it wouldn't make sense to be able to change this) while
others can be changed from within a script. The bgColor and fgColor properties
are the equivalent of the BGCOLOR and TEXT tags of <BODY>. Instead of <BODY
BGCOLOR="Black" TEXT="White"> you could use

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>

This is a fairly pointless example, using an extra six lines to achieve the same
end as the standard <BODY> tag, but when we look at cookies later, you'll be
able to see how to allow each user to save their own preferences for your site.
We put the script in the <HEAD> section of the page, because once the body tag
has been written then colours are set, changing them later would be no use
(actually, you can change bgColor partway during a document, but this can
produce unpredictable results, see weirdcolours.html for an example of code you
should not inflict on your visitors).

JavaScript deals with the document at the moment it is run. If you want to write
to the window, you call the script at the point you want the output to appear.
If you want to process information entered in a form, you must call the script
after the form has been displayed, or it won't be able to find the form fields.
This could mean mixing JavaScript and HTML together in a page, which makes later
editing a nightmare. To avoid this, it is often better to define all your
JavaScript as functions in the head of the document so you only need a simple
call to the script in the HTML body text.

Here is how we show the last modified date of the page using this method.

<HEAD>
<TITLE>....</TITLE>
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
Body text
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
</SCRIPT>
</BODY>

No matter how complex the script, the body text will only contain three lines of
JavaScript. There is an even neater way of writing HTML to the end of a
document, as we will see when we look at event handlers.

** No JavaScript?

Not every browser will run JavaScript, either because it doesn't support it or
because it is disabled in the preferences. It is important to consider how your
site will appear and work for those not using JavaScript. The examples we have
seen so far are not essential to using the site, but other pages may not work as
you intended without JavaScript. HTML provides a means to deal with this, the
<NOSCRIPT> tag. A browser running JavaScript will ignore anything between
<NOSCRIPT> and </NOSCRIPT> while other browsers will ignore the <NOSCRIPT> tags
and display the text between them. If your pages will work differently without
JavaScript, you should put a warning about this within the <NOSCRIPT> tags.

***Boxout
**Java or JavaScript

Java and JavaScript are two completely different things, despite the similarity
of the names. In fact, that's about all they have in common. Java is a full
blown programming language. Although its web usage is mainly for small Java
"applets", it will be a core element of the new Amiga Operating Environment.
There is currently no usable Java implementation for the Amiga.

JavaScript is an interpreted scripting language. The two languages have very
different capabilities and complement each other rather than performing the same
tasks.

*** Boxout
** Case sensitivity

JavaScript keywords are case-sensitive, document.write is not the same as
Document.Write. however, just to make things confusing, Internet Explorer is
case-insensitive for client-side terms, such as document. The result is the
worst of both worlds, you have to ensure you always type with the correct case,
yet you cannot take advantage of the case-sensitivity to create extra variables.

** Netscape.png:

The definitive reference manual for JavaScript is on Netscape's web site at
developer.netscape.com/library/documentation/communicator/jsguide4/index.htm

JavaGoodies.png:

Despite the name, http://www.javagoodies.com contains a lot of useful
information and examples on using JavaScript.

*** Boxout
** Contents

1. Introduction
2. Rollover images
3. Form validation
4. Dynamic content
5. Frame handling
6. Compatibility